////
/// @group expansion-panel
////

@use "../utils";
@use "../spacing";
@use "../transition/transition";
@use "../icon/icon";
@use "../button/button";
@use "../theme/theme";

/// Set to `true` to disable all the styles
/// @type Boolean
$disable-everything: false !default;

/// Set to `true` to disable the transition when panels are expanded in a
/// group.
///
/// @type Boolean
$disable-margin-top-transition: false !default;

/// The amount of padding to apply to the clickable area in the
/// `ExpansionPanel`.
///
/// @type Number
$padding: spacing.get-var(md) !default;

/// The `margin-top` to apply between expanded expansion panels
///
/// @type Number
$spacing: spacing.get-var(md) !default;

/// The `gap` to apply between elements in the clickable area in the
/// `ExpansionPanel`.
///
/// @type Number
$button-spacing: spacing.get-var(sm) !default;

/// The degrees to start the rotation animation for the expansion panel icon.
///
/// @type Number
$rotate-from: icon.$rotate-from !default;

/// The degrees to end the rotation animation for the expansion panel icon.
///
/// @type Number
$rotate-to: icon.$rotate-to !default;

/// Change this value if borders/box-shadow are visible while the
/// `ExpansionPanel` component is collapsed in a group.
///
/// @type Number
$box-shadow-overlay-height: 10px !default;

/// Change this value if borders/box-shadow are visible while the
/// `ExpansionPanel` component is collapsed in a group.
///
/// @type Number
$box-shadow-overlay-bottom: -6px !default;

/// Generates all the styles based on feature flags.
///
/// @param {Boolean} disable-layer [false] - Set this to `true` to disable the
/// layer behavior
@mixin styles($disable-layer: false) {
  @if not $disable-everything {
    @include utils.optional-layer(expansion-panel, $disable-layer) {
      // does not require custom styles
      .rmd-expansion-panel {
        @if not $disable-margin-top-transition and $spacing {
          &--animate {
            transition: margin-top transition.$linear-duration;
          }
        }

        @if $spacing {
          &--expanded + .rmd-expansion-panel {
            margin-top: $spacing;
          }
        }

        @if not utils.$disable-has-selectors {
          // this makes it so that the box-shadow between closed panels is not
          // visible by covering it in a small overlay of the current
          // background-color
          &:where(:not(.rmd-expansion-panel--expanded)):has(
              + .rmd-expansion-panel
            ) {
            position: relative;

            &::after {
              @include theme.theme-use-var(background-color);

              bottom: $box-shadow-overlay-bottom;
              content: "";
              height: $box-shadow-overlay-height;
              left: 0;
              position: absolute;
              right: 0;
              z-index: 1;
            }
          }
        }
      }

      // .rmd-expansion-panel__header {
      // }

      .rmd-expansion-panel__button {
        @if $rotate-from != icon.$rotate-from {
          @include icon.set-var(rotate-from, $rotate-from);
        }

        @if $rotate-to != icon.$rotate-to {
          @include icon.set-var(rotate-to, $rotate-to);
        }

        @if button.$disable-unstyled-utility-class {
          @include button.unstyled;
        }

        align-items: center;
        color: inherit;
        font: inherit;
        gap: $button-spacing;
        justify-content: space-between;
        letter-spacing: inherit;
        padding: $padding;
        text-align: left;
        width: 100%;

        &[aria-disabled="true"] {
          cursor: auto;
        }

        // need to raise the focus outline z-index so it is above the box-shadow
        @if not utils.$disable-has-selectors {
          @if not utils.$disable-focus-visible {
            &::before {
              z-index: 2;
            }
          } @else {
            @include utils.keyboard-only {
              &::before {
                z-index: 2;
              }
            }
          }
        }

        @include utils.rtl {
          text-align: right;
        }
      }
    }
  }
}
